<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<title>rapid-DEV.net Jquery Ajax JSON Cross Domain Example</title>

	<style type="text/css">
		body, html { font-family:helvetica,arial,sans-serif; font-size:90%; width:500; height:500;}
		/*div {
			display: none;
		}*/
	</style>
</head>
<script>

function wallPost() {
	chrome.tabs.getSelected(null, function(tab) {
		myFunction(tab.url);
	});
	function myFunction(link) {
		
		// 	SEND THE URL TO SERVER
		var dataString = "Link="+link;
		var url = "http://cyberang3l.ath.cx:33335/ExtResponse/IntoThisWallPost.php?"+dataString;
		// 		GET THE RESPONE FROM SERVER
		$.getJSON(url + "&jsoncallback=?", function(data){
			Message = data.Message;
			jQuery("#newboxes3").html('<br>'+Message);
		})
		return false;
	}	
}

function showonlyone(thechosenone) {
	$('div[name|="newboxes"]').each(function(index) {
		if ($(this).attr("id") == thechosenone) {
			if (thechosenone == "newboxes1") {
				jQuery("#newboxes1").html('<br>Deletion in process. Please wait!');
				deleteLink();
			}
			else if (thechosenone == "newboxes3") {
				wallPost();
			}
			$(this).show(200);
		}
		else {
			$(this).hide(600);
		}
	});
}

function boxOffHover(box) {
	box.style.background='#FFFFFF';
}


function boxOnHover(box) {
	box.style.cursor='pointer' 
	box.style.background='#FFFF00';
}


function deleteLink() {
		/*GET TAB URL*/
	chrome.tabs.getSelected(null, function(tab) {
		myFunction(tab.url);
	});
	function myFunction(link) {
		
		// 	SEND THE URL TO SERVER
		var dataString = "Link="+link;
		var url = "http://cyberang3l.ath.cx:33335/ExtResponse/IntoThisDelete.php?"+dataString;
		// 		GET THE RESPONE FROM SERVER
		$.getJSON(url + "&jsoncallback=?", function(data){
			setTimeout("location.reload(true)", 3000);
		})
	
		return false;
	}
}

function verbs(category, verb11,verb12, verb21,verb22,verb31,verb32)
{
	this.category=category;
	this.verb11=verb11;
	this.verb12=verb12;
	this.verb21=verb21;
	this.verb22=verb22;
	this.verb31=verb31;
	this.verb32=verb32;
}

function categoryMenu() {

	// CATEGORY <GENERAL / QUESTION / KNOWLEDGE> -> I AM INTO THIS
	category[0]=new verbs("General", "I am into this", "is into this", "null", "null", "null", "null");

	// CATEGORY <PLACE> -> I HAVE BEEN THERE / I WANT TO GO THERE
	category[1]=new verbs("Place", "I have been there", "has been there", "I want to go there", "wants to go there", "null","null");

	// CATEGORY <COMPANY> -> I WORK HERE, I AM A CUSTIMER HERE
	category[2]=new verbs("Company", "I work", "works", "I am a customer", "is a customer", "I own this", "owns this");


	// 	var i=0;
	// 	for (i=0 ; i<category.length ; i++ ) {
	// 		document.write(category[i].category+" "+category[i].verb11+" "+category[i].verb12+" "+category[i].verb21+" "+category[i].verb22+" "+category[i].verb31+" "+category[i].verb32);
	// 	}


	var result = '<form name="category"> <select name="cars" onChange="categoryChange(this)">';
	var i= 0;
	for (i=0;i<category.length;i++) {
		result = result+'<option value="'+category[i].category+'">'+category[i].category+'</option>';
	}
	result = result+'</select></form>';
	jQuery("#category_select").html(result);
	jQuery("#category_select").show();
	
}

// 3 verb CATEGORIES!
var category = new Array(3);



function categoryChange(selected) {
	var verbsArray = new Array(3);
	for (i=0 ; i<category.length ; i++ ) {
		if (category[i].category==selected.value) {
			if (category[i].verb11 != "null") verbsArray[0] = category[i].verb11;
// 			if (category[i].verb12 != "null") verbsArray[1] = category[i].verb12;
			if (category[i].verb21 != "null") verbsArray[1] = category[i].verb21;
// 			if (category[i].verb22 != "null") verbsArray[3] = category[i].verb22;
			if (category[i].verb31 != "null") verbsArray[2] = category[i].verb31;
// 			if (category[i].verb32 != "null") verbsArray[5] = category[i].verb32;
			break;
		}
		//document.write(jQuery.inArray("Place", category[i]));
	}
	jQuery("#category_result").html(selected.value);
	//var verbsArray=Verbs.split(",");
	var i = 1;
	var length = verbsArray.length;
	$('div[name|="btn"]').each(function() {
			if (i < length) {
				$(this).html('<span><li>'+verbsArray[i]+'</span>');
				$(this).show();
			}
			i+=1;
			$(this).click(function() {
				var VerbResponse = $(this).html();
				VerbResponse = VerbResponse.substring(10, VerbResponse.length-12);
				var dataString = "Link="+link+"&req=2&VerbResponse="+VerbResponse;
				var url = "http://cyberang3l.ath.cx:33335/ExtResponse/IntoThisResponse.php?" + dataString;
				$.getJSON(url + "&jsoncallback=?", function(data){
					UserName = data.UserName;
					Response = data.response;
					if (Response == "inserted") {
						jQuery("#msg").html(UserName+' is into this! <img src="check.jpg"/>');
						$('#msg').slideDown('slow', function() {
							// Animation complete.
							$("#opt").show();
						});
					}
				});
			})
	});
}





jQuery(document).ready(function(){

	

	/*GET TAB URL*/
	chrome.tabs.getSelected(null, function(tab) {
		 myFunction(tab.url);
	});
	function myFunction(link) {

		var port = chrome.extension.connect("lfgliekpdnhndjfckplpabbomcdhfbno");
		port.onDisconnect.addListener(function(msg) {
			$("#installation_expected").show();
			return ;
		});

		categoryMenu();

	// 	SEND THE URL TO SERVER
		var dataString = "Link="+link+"&req=1";
		var url = "http://cyberang3l.ath.cx:33335/ExtResponse/IntoThisResponse.php?" + dataString;
		
		
	// 		GET THE RESPONE FROM SERVER
		$.getJSON(url + "&jsoncallback=?", function(data){
			UserName = data.UserName;
			Response = data.response;
			UserCheck = data.user_check;
			Verbs = data.Verbs;
	// 		Message = "<img src='into.jpg'/>";
			if (Response == "not_logged_in") {
				jQuery("#btn0").html('<span><a href="'+UserName+'" target="_blank">Login to continue!</a></span>');
				$("#btn0").show();
				
			}
			else if (Response == "not_exist") {
				jQuery("#login").html(UserCheck);
				
				var port = chrome.extension.connect("mpjldmnbemocgcinbadicehgjjdakiib");
				port.onDisconnect.addListener(function(msg) {
					$("#login").show();
				});
				
				var verbsArray=Verbs.split(",");
				var i = 1;
				var length = verbsArray.length;
				$('div[name|="btn"]').each(function() {
						if (i < length) {
							$(this).html('<span><li>'+verbsArray[i]+'</span>');
							$(this).show();
						}
						i+=1;
						$(this).click(function() {
							var VerbResponse = $(this).html();
							VerbResponse = VerbResponse.substring(10, VerbResponse.length-12);
							var dataString = "Link="+link+"&req=2&VerbResponse="+VerbResponse;
							var url = "http://cyberang3l.ath.cx:33335/ExtResponse/IntoThisResponse.php?" + dataString;
							$.getJSON(url + "&jsoncallback=?", function(data){
								UserName = data.UserName;
								Response = data.response;
								if (Response == "inserted") {
									jQuery("#msg").html(UserName+' is into this! <img src="check.jpg"/>');
									$('#msg').slideDown('slow', function() {
										// Animation complete.
										$("#opt").show();
									});
								}
							});
						})
				});

				$("#verbs").show();
				
			}
			else if (Response =="exist" ) {
				jQuery("#login").html(UserCheck);
				$("#login").show();
				jQuery("#btn0").html('<span><li>I am into this</span>');
				$("#btn0").show();
				jQuery("#msg").html(UserName+' is into this! <img src="check.jpg"/>');
				$('#msg').slideDown('slow', function() {
					$("#opt").show();
				});
			}
			else {
				jQuery("#btn0").html('<span>'+Response+'</span>');
				$("#btn0").show();
			}
		})
		
		return false;
	}
});





</script>
<body>

<!-- 	INSTALL -ASK MY FRIENDS- EXTENSION -->
	<div id="installation_expected"  style="display:none;">
		Install extension to continue!
	</div>

<!-- 	LOGIN TO FB APPLICATION -->
	<div id="login" style="display:none;float:right;font-size:10px">
		
	</div>

<br>

<!-- CATEGORY SELECTION -->
	<div id="category_select" style="display:none;float:left;font-size:10px">
		<!--<form name="category">
		<select name="cars" onChange="categoryChange()">
			<option value="volvo"></option>
			<option value="saab">Saab</option>
			<option value="fiat" selected="selected">Fiat</option>
			<option value="audi">Audi</option>
		</select>
		</form>-->
	</div>

	<div id="category_result" style="float:right;font-size:10px">
		I am into this
	</div>


<!-- I AM INTO THIS -TMP -->
	<br><br>


		<div id="btn0" style="display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">
			
		</div>



<!-- 	VERB BUTTONS! -->
	<div id="verbs" style="display:none;" >
		<!--<img src="friends.png" title="Friends" onclick="friends();"/>
		<img src="X.gif" title="Delete" />
		<img src="opt.PNG" title="Options" />-->
		

		<div name="btn" id="btn1" style="display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">
			
		</div>

		<div name="btn" id="btn2" style=" display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">

		</div>
		
		<div name="btn" id="btn3" style=" display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">

		</div>

		<div name="btn" id="btn4" style=" display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">

		</div>

		<div name="btn" id="btn5" style=" display: none;width:200px;" onmouseover="boxOnHover(this);" onmouseout="boxOffHover(this);">

		</div>

	</div>
	

<!-- 	INSERTION DONE -->
	<div id="msg" style="font-size:15px;display:none;">

	</div>


<!-- 	OPTIONS - FRAMES  -->
	<div id="opt" style="display:none;" >
		<!--<img src="friends.png" title="Friends" onclick="friends();"/>
		<img src="X.gif" title="Delete" />
		<img src="opt.PNG" title="Options" />-->
		
		<div style="float: right;">
			<a id="myImage1" href="javascript:showonlyone('newboxes1');" ><img src="X.gif" title="Delete" /></a>

			<a id="myImage3" href="javascript:showonlyone('newboxes3');" ><img src="wall.jpg" title="Post on Wall" /></a>
		</div>

		<div name="newboxes" id="newboxes1" style="display: none;">
			
		</div>

		<div name="newboxes" id="newboxes3" style=" display: none;">

		</div>

	</div>
</body>
</html>